<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 6.4vw;
            height: 4.667vw;
            background-color: #bfa;
        }
    </style>
</head>
<body>
        <!-- 不同的设备完美视口的大小是不一样的
             i6--375
             i6plus--414

             由于不同设备视口和像素比不同,所以不同的375像素在不同的设备意义是不一样
                比如在i6中 375就是全屏了,而到了移动plus就会缺一块

            所以在移动端开发时,就不能使用px来布局了

            vw表示的是视口的宽度(viewport width)
                - 100vw=一个视口的宽度
                - 1vw=1%视口单位

                vw永远相当于视口进行计算

                设计图的宽度
                    750px 1125px
                使用vw来作为单位
                    100vw  

                创建一个48*35大小的像素
 
                100vw=750px(设计图的像素)
                6.4vw=48px(设计图像素)
                4.667vw=35px
                0.133333333333333vw=1px

        -->
        <div class="box1"></div>
</body>
</html>